<template>
  <xoFormItem :label="props.label" :tips="props.tips" :ruleMessage="props.ruleMessage">
    <template #header>
      <slot name="header"></slot>
    </template>
    <div class="grow form-item-inline justify-between" @click="handleClick">
      <div v-if="props.content" class="font-bold grow">{{ props.content }}</div>
      <div class="desc">{{ props.placeholder }}</div>
      <div :class="props.type === 'navigate' ? 'arrow-right' : 'arrow-down'"></div>
    </div>
    <template #footer>
      <slot name="footer"></slot>
    </template>
  </xoFormItem>

</template>

<script setup lang='ts'>

import xoFormItem from './xoFormItem.vue'

export type NavigateType = 'navigate' | 'dropdown'

interface IProps {
  label?: string,
  content?: string,
  tips?: string,
  type?: NavigateType,
  placeholder?: string,
  ruleMessage?: string,
}

const props = withDefaults(defineProps<IProps>(), {
  label: '',
  content: '',
  tips: '',
  type: 'navigate',
  placeholder: '',
  ruleMessage: '',
})

const emit = defineEmits(['click'])

const handleClick = () => {
  emit('click')
}




</script>

<style></style>